<template>
  <div class="container">
    <div class="login">
      <div class="img-container">
        <img src="//wwc.alicdn.com/avatar/getAvatar.do?userNick=&width=50&height=50&type=sns&_input_charset=UTF-8" alt="1">
      </div>
      <p v-if="username" class="user">hi~{{ username }}</p>
      <ul class="user-util">
        <li>
          <i class="el-icon-finished"></i>
          <nuxt-link to="/addGoods"><span>添加商品</span></nuxt-link>
        </li>
        <li>
          <i class="el-icon-shopping-cart-2"></i>
          <nuxt-link to="/shopcart"><span>清空购物车</span></nuxt-link>
        </li>
        <li>
          <i class="el-icon-medal" />
          <span>领淘金币抵钱</span>
        </li>
        <li>
          <i class="el-icon-s-custom" />
          <span>会员俱乐部</span>
        </li>
      </ul>
      <div v-if="!username">
        <el-button>登录</el-button>
        <el-button>注册</el-button>
        <el-button>开店</el-button>
      </div>
    </div>
    <div class="notice">
      <p>
        网上有害信息举报区
        <i class="el-icon-caret-right" />
      </p>
      <div class="notice-menu">
        <ul>
          <li>公告</li>
          <li>规则</li>
          <li>论坛</li>
          <li>安全</li>
          <li>公益</li>
        </ul>
      </div>
      <ul class="notice-content">
        <li>
          <a href="">95公益周阿里、腾讯等六家公司同台联合做公益</a>
        </li>
        <li>
          <a href="">淘宝造物节之城市秘密</a>
          <a href="">聚划算88红包省钱卡</a>
        </li>
      </ul>
    </div>
    <div class="quick-menu">
      <ul>
        <li v-for="(item, index) in list" :key="index" :class="{'active':itemIndex == index}" @mouseover="itemIndex=index">
          <nuxt-link to="#">
            <i :class="item.icon" />
            <p>{{ item.title }}</p>
          </nuxt-link>
        </li>
      </ul>
      <div class="menu-content">
        <input type="text" placeholder="请输入手机号">
        <select id="" name="">
          <option value="">
            1元
          </option>
          <option value="">
            2元
          </option>
          <option value="">
            3元
          </option>
        </select>
        <p>售价10-100元</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      notice: [
        {
          titel: '公告',
          content: [
            '95公益周阿里、腾讯等六家公司同台联合做公益',
            '淘宝造物节之城市秘密',
            '聚划算88红包省钱卡'
          ]
        }, {
          titel: '规则',
          content: [
            '新增《淘宝网汽配行业管理规范》公示通知',
            '《淘宝网区域零售服务说明》变更公示通知',
            '《淘宝网票务行业管理规范》变更公示通知',
            '《淘宝网数字娱乐市场须提供官方授权的商品目录》变更公示通知'
          ]
        }, {
          titel: '论坛',
          content: [
            '淘宝嘉年华招商',
            '在线职业培训招商',
            '金秋超值购招商',
            '运营神器年中大促'
          ]
        }, {
          titel: '安全',
          content: [
            '魔豆妈妈公益项目',
            '让母爱永不打烊！',
            '卖家注意：风险通报！',
            '售假获刑又起诉！'
          ]
        }, {
          titel: '公益',
          content: [
            '淘宝公益平台正式更名',
            '益起来商家招募即将截止',
            '卖家如何设置公益宝贝',
            '公益机构开店全攻略'
          ]
        }
      ],
      username: "",
      itemIndex: 0,
      list: [
        {
          title: "充话费",
          icon: "el-icon-mobile-phone"
        },
        {
          title: "旅行",
          icon: "el-icon-bicycle"
        },
        {
          title: "车险",
          icon: "el-icon-shopping-cart-2"
        },
        {
          title: "游戏",
          icon: "el-icon-basketball"
        }
      ]
    }
  },
  async mounted () {
    const { status, data } = await this.$axios.get("/users/getUser")
    if (status === 200 && data) {
      this.username = data.username
    }
  }
}
</script>

<style lang="stylus" scoped>
.container
  margin 0 10px
.login
  width 100%
  text-align center
  margin-top 15px
  .user
    font-size 14px
    color red
  img
    width 50px
  .user-util
    li
      display inline-block
      padding 10px
      cursor pointer
      color #e74c3c
      width 30%
      i
        color #f39c12
      &:hover
        color #e74c3c
        opacity 0.5
.notice
  text-align center
  p
    line-height 25px
    margin 10px 0
    background rgb(255,228,221)
    cursor pointer
  .notice-menu
    li
      display inline-block
      margin 0 10px
      cursor pointer
      font-weight 600
      position relative
      border-bottom 2px solid #fff
      &:hover
        border-bottom 2px solid rgb(255,68,0)
        color #aaa
  .notice-content
    margin-top 10px
    white-space nowrap
    li
      padding 5px 10px
    a
      color #e74c3c
      margin 5px 10px
.quick-menu
  position relative
  ul
    .active
      position relative
      z-index 1
      border 1px solid #e67e22
      border-bottom-color #fff
    li
      background #fff
      overflow hidden
      float left
      display inline-block
      width 24%
      height 71px
      font-size 14px
      border 1px solid #fff
      text-align center
      a
        margin-top 10px
        height 70px
        display block
      i
        font-size 26px
      // &:hover
      //   position relative
      //   z-index 1
      //   border 1px solid #e67e22
      //   border-bottom-color #fff
  .menu-content
    text-align center
    height 95px
    width 97.8%
    border 1px solid #e67e22
    position absolute
    top 72px
    clear both
    input
      width 60%
      border 1px solid #e67e22
      margin 10px 0
    select
      display block
      width 60.5%
      border 1px solid #e67e22
      margin 0 auto
      outline none
</style>
